<script lang="ts" setup>
import { ref } from "vue"

const dataList = ref<any[]>([
  {
    wxinfo: '微信昵称',
    realName: '李少辉',
    phone: '1351234567',
    createdAt: '2021-01-01 00:00:00',
  },
  {
    wxinfo: '微信昵称',
    realName: '李少辉',
    phone: '1351234567',
    createdAt: '2021-01-01 00:00:00',
  },
  {
    wxinfo: '微信昵称',
    realName: '李少辉',
    phone: '1351234567',
    createdAt: '2021-01-01 00:00:00',
  },
])
</script>

<template>
  <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
    <umrp-breadcrumb :items="['员工管理', '员工列表']"></umrp-breadcrumb>
    <umrp-search-card>
      <umrp-row :gutter="12">
        <umrp-col :span="8">
          <umrp-form-item label="员工手机号">
            <umrp-input placeholder="请输入员工手机号码"></umrp-input>
          </umrp-form-item>
        </umrp-col>
        <umrp-col :span="8">
          <umrp-form-item label="员工姓名">
            <umrp-input placeholder="请输入员工姓名"></umrp-input>
          </umrp-form-item>
        </umrp-col>
      </umrp-row>
    </umrp-search-card>
    <umrp-card :border="false">
      <umrp-table :action-bar="true" :data="dataList">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="微信资料" slot-name="wxinfo"></umrp-table-column>
          <umrp-table-column title="员工姓名" data-index="realName"></umrp-table-column>
          <umrp-table-column title="手机号码" data-index="phone"></umrp-table-column>
          <umrp-table-column title="加入时间" data-index="createdAt" :width="180"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="160"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary">编辑</umrp-button>
            <umrp-button type="danger">移除</umrp-button>
          </umrp-space>
        </template>
        <template #wxinfo>
          <umrp-user-info></umrp-user-info>
        </template>
      </umrp-table>
    </umrp-card>
    <umrp-modal :visible="true" :width="500">
      <umrp-form>
        <umrp-form-item label="员工姓名">
          <umrp-input></umrp-input>
        </umrp-form-item>
        <umrp-form-item label="手机号码">
          <umrp-input></umrp-input>
        </umrp-form-item>
      </umrp-form>
    </umrp-modal>
  </umrp-container>
</template>